<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10_DOM事件监听</title>

</head>
<body>
    <button onclick="alert('最近降温,注意保暖')">弹出警告框</button>
    <button id="btn">我是按钮</button>
    <h4>震惊:居然发生了这种事...</h4>
    <div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cum debitis delectus, dolorem dolores ex
            exercitationem facere harum nostrum omnis provident quasi quo repudiandae sed similique veniam, veritatis
            vero vitae.
        </div>
        <div>Dolore ducimus fuga labore nihil odit! Accusantium adipisci alias assumenda corporis cumque dolor ducimus,
            eos eum ipsa ipsum magni minima, nostrum, numquam optio praesentium repellat rerum vel? Fugiat officiis,
            quaerat!
        </div>
        <div>A accusantium, ad atque consequuntur cupiditate dolorum enim et expedita harum illum minus mollitia, porro
            possimus, ratione repellendus reprehenderit sint voluptatibus. At dolor fugit id illo itaque numquam ratione
            reiciendis.
        </div>
        <div>Alias cumque numquam optio placeat. Aut consectetur dolor, facere illum inventore laborum nihil nobis
            obcaecati! Alias aut autem dignissimos dolorum excepturi hic in, inventore nemo officia, possimus repellat
            rerum vel?
        </div>
        <div>A ab atque corporis ducimus ea enim est incidunt, ipsa labore, libero nam natus nihil officia qui quia
            quisquam rerum similique voluptatibus. Aperiam cumque dolorum enim eum labore nostrum tempora?
        </div>
        <div>Assumenda at commodi corporis cupiditate dignissimos dolor, dolore earum et expedita hic impedit labore
            libero mollitia obcaecati odit quae quidem quod repellendus, sed voluptate. Cumque dolor est natus placeat
            rerum.
        </div>
        <div>Atque consequuntur delectus eius incidunt ipsam necessitatibus omnis optio repudiandae totam ut! Aperiam
            asperiores beatae delectus dicta error in inventore obcaecati omnis perferendis quam reprehenderit saepe
            sunt velit veritatis, voluptas?
        </div>
        <div>Accusamus asperiores, assumenda dolore earum excepturi facilis fugit illo illum ipsum nam neque nesciunt
            nobis officia praesentium quae repellendus sunt suscipit tempora tenetur totam? Accusamus corporis eveniet
            ex explicabo tempore.
        </div>
        <div>Accusantium ad cum, et facere id inventore pariatur sequi vero. Aliquid aut blanditiis debitis eos
            exercitationem facere facilis necessitatibus neque quae quaerat, rerum sed tempora ullam ut voluptas
            voluptate voluptatibus!
        </div>
        <div>Aliquid amet cumque iusto mollitia quae quam quis? Accusamus aut consectetur eos est illo nisi officia
            placeat repellat vero, voluptatibus. Animi cumque eius facilis id in itaque odit quod sit!
        </div>
        <div>Cumque deserunt distinctio eligendi laborum nemo nobis non optio, qui quisquam voluptatem. Adipisci
            asperiores beatae ducimus ea, facilis laudantium libero non optio quis reiciendis rem reprehenderit
            voluptatem voluptatum. Ad, porro.
        </div>
        <div>Dolorem est fugit hic laborum minima nemo numquam repellat soluta. Alias architecto at, explicabo inventore
            iste, itaque laboriosam minus necessitatibus nihil perferendis praesentium quae quas quos repellendus,
            tempore unde voluptas?
        </div>
        <div>A distinctio ipsum, minus numquam quas saepe! Accusantium, commodi consequatur cum error ex inventore iusto
            magnam molestiae mollitia natus placeat quibusdam sint? Autem iste laborum quas quasi suscipit vero.
            Obcaecati!
        </div>
        <div>A cupiditate facilis illum ipsam itaque laudantium natus necessitatibus obcaecati quas, ratione
            reprehenderit suscipit vel! Aliquam animi dolores necessitatibus nemo nihil quod repellat. Cumque dolor
            fugit impedit sit voluptates voluptatum!
        </div>
        <div>Alias amet distinctio dolor dolores est facere impedit libero molestiae, nobis, obcaecati pariatur quasi
            quibusdam reiciendis repudiandae saepe similique voluptatem? Cupiditate eligendi facere fugiat incidunt
            labore nobis qui vero voluptate?
        </div>
        <div>Asperiores assumenda aut deleniti, dolores eligendi enim expedita fugiat, illo minus perferendis porro
            possimus quae quaerat quas qui quidem quod sunt vero vitae voluptas? Aliquam facere illum itaque! Fugit,
            quos.
        </div>
        <div>Accusantium ad adipisci amet architecto assumenda corporis fuga hic, id minima molestias nam natus,
            nesciunt nostrum officia praesentium sequi totam. Animi est in magnam nesciunt, nulla qui veniam voluptas
            voluptatum!
        </div>
        <div>Delectus eos, excepturi facere id ipsum quaerat quas ratione temporibus. Consequuntur corporis iusto magni
            odit reprehenderit. Commodi, debitis, velit! Alias consectetur cumque eaque eligendi incidunt, ipsam iste
            quibusdam voluptatem voluptatibus.
        </div>
        <div>Alias animi cupiditate delectus, deserunt dicta, dolorem doloremque dolores eos eveniet illum incidunt iure
            quasi sapiente! Dicta ducimus facere modi odit qui. Eius facere laboriosam libero quae quos totam
            voluptates?
        </div>
        <div>Ea excepturi labore quam velit. Accusantium aut commodi, debitis deleniti dolore fuga inventore minus nam
            necessitatibus nesciunt, nihil nostrum odit, quod recusandae sapiente sit tenetur? Doloremque eveniet fugiat
            illo voluptates.
        </div>
        <div>Cupiditate deleniti possimus recusandae reprehenderit sint. Corporis, debitis quod! Dolorem nemo odio
            quibusdam vero voluptatibus. Adipisci consequuntur eaque expedita magni nobis officia officiis, praesentium
            saepe sint sunt? A maxime, quisquam.
        </div>
        <div>Cumque debitis, sint. Molestias, rerum, soluta. Assumenda dicta dolor dolorem in incidunt ipsum maiores
            maxime mollitia nam, necessitatibus non optio possimus provident quasi rerum, sed tempore tenetur velit
            voluptatibus voluptatum.
        </div>
        <div>Aliquid architecto aspernatur possimus. Ab eveniet magni minus, molestiae optio quas quis quos sit unde
            velit. Aut, dicta distinctio exercitationem laboriosam, laborum modi numquam obcaecati quidem quisquam sit
            vel vitae.
        </div>
        <div>Blanditiis consectetur dolore doloremque ea eveniet excepturi fugiat ipsam quos rem repudiandae rerum
            sapiente sit, ullam vel voluptate. Fuga libero molestias nulla quia reprehenderit, rerum vero. Esse hic
            quidem sed.
        </div>
        <div>Adipisci, animi culpa cumque deserunt distinctio eos fuga fugit illo illum iste itaque libero maiores
            maxime necessitatibus nesciunt nobis nulla obcaecati omnis placeat quaerat ratione soluta sunt tempore ut
            voluptates.
        </div>
        <div>Alias aperiam at blanditiis cupiditate delectus dolorem enim est exercitationem expedita explicabo fuga
            illo iste molestias nulla perferendis, qui quo rem rerum saepe sapiente similique temporibus voluptas
            voluptatem. Aspernatur, repudiandae?
        </div>
        <div>Aliquid beatae dolorem ea eos explicabo fugiat ipsam odio, quisquam temporibus vel velit veniam veritatis
            voluptas. Alias consectetur consequuntur dolorum eos iste molestias qui quidem quod sapiente sit. Nostrum,
            quia?
        </div>
        <div>Accusantium eum exercitationem nisi sapiente totam. A commodi facere facilis impedit inventore ipsa iste
            itaque magni molestias, mollitia nesciunt nihil nulla officia placeat qui reiciendis repellendus rerum sit
            vel vero?
        </div>
        <div>Alias aperiam asperiores commodi consequuntur deserunt, dicta dignissimos et illum labore libero molestias
            perferendis qui quod ratione recusandae reiciendis repellat reprehenderit saepe sapiente sint sunt vel
            voluptate? Adipisci, consequuntur, debitis.
        </div>
        <div>Dicta dolore earum facilis nulla obcaecati. Ad, dolor dolores ea earum eos fugit harum id, illo ipsa,
            laudantium nesciunt nobis officia praesentium provident quas quisquam quo quod quos tempore voluptatum.
        </div>
        <div>Aut cupiditate debitis dicta dolor similique! Architecto consectetur cumque deleniti dignissimos eius eum,
            ex facilis labore libero minus, natus nisi pariatur, quod quos tempora temporibus tenetur. Minus molestias
            nihil pariatur.
        </div>
        <div>Eos in quod voluptatibus. Aliquid ducimus eligendi id incidunt iste laborum odit quidem veritatis vitae
            voluptas. Architecto beatae consequuntur culpa eaque ipsum iste nihil nostrum possimus rem soluta? Repellat,
            suscipit.
        </div>
        <div>Ad assumenda corporis esse quaerat quas temporibus. Aliquid culpa dolorum iusto maiores nobis obcaecati
            placeat quidem quisquam tempore! Architecto, commodi consectetur esse hic maiores nam nemo quia quibusdam
            quisquam velit?
        </div>
        <div>Dicta doloribus est id incidunt nemo neque quae reiciendis, totam. Architecto ex expedita ipsa praesentium.
            Adipisci aliquam aut, cupiditate dolorum, earum et eum, fugiat labore nam necessitatibus quae ratione
            voluptas!
        </div>
        <div>A adipisci, assumenda at, deserunt doloremque earum eos excepturi illum impedit ipsa, iure laborum minima
            pariatur provident quibusdam quis repellendus rerum saepe sed sit ut velit voluptas! Id ipsa, quod.
        </div>
        <div>Corporis dolore et explicabo fugiat harum id in itaque nam nesciunt nisi non officia placeat porro quae
            quasi quia quis, quisquam rem repellat repellendus? Inventore, laborum, maiores? Exercitationem explicabo,
            velit.
        </div>
        <div>Ab culpa deserunt eligendi minus sed? Accusantium, alias animi asperiores commodi consequuntur cumque eaque
            enim explicabo facere inventore ipsum laudantium minus modi nihil nostrum pariatur provident quam unde
            voluptate voluptatum.
        </div>
        <div>Dicta dolores doloribus illum sint totam vitae, voluptate voluptates! Consequuntur deleniti doloremque eius
            et ex id maxime quisquam, repellendus. Architecto assumenda at commodi consectetur culpa delectus dolores
            nemo pariatur placeat.
        </div>
        <div>At consectetur iure minima nobis officia quod! Ea, nostrum ratione. Adipisci deserunt esse facere, hic
            laborum molestiae quam quisquam tempora tempore voluptas. Ab alias illo illum libero quisquam ullam
            voluptas.
        </div>
        <div>Atque delectus facilis in, labore optio perferendis! Ad aliquid consectetur culpa, distinctio dolorem
            doloremque ipsam iusto libero magni, minima, molestiae mollitia nemo nihil obcaecati odio provident quam
            quis saepe voluptatibus!
        </div>
        <div>Accusamus alias architecto beatae commodi deleniti dolorem doloribus ducimus ea eum explicabo fugit ipsum
            maiores molestias nemo nisi, odit, omnis perferendis quae quod repellendus sapiente sed vero! Consequatur,
            delectus, natus.
        </div>
        <div>Accusamus architecto assumenda aut deserunt dolor ea eum excepturi exercitationem fugiat, ipsum laudantium,
            odio quibusdam quidem, quis rem repudiandae sit veritatis vitae? Accusantium, assumenda distinctio
            doloremque ipsa libero maiores quidem.
        </div>
        <div>Autem culpa, ducimus eaque eos eveniet exercitationem, ipsam ipsum libero maiores nam officiis porro qui
            quibusdam ratione rem saepe similique totam voluptate. Accusantium, dolorum ipsam maiores minima quis soluta
            temporibus.
        </div>
        <div>Accusamus atque, dolorum eveniet impedit ipsum iure laboriosam, necessitatibus nemo non, officiis optio
            perferendis quam saepe suscipit temporibus? Alias assumenda delectus, earum eos exercitationem ipsam
            laudantium omnis quisquam repellat tempora.
        </div>
        <div>Consequuntur, reiciendis, sequi. At autem blanditiis corporis culpa earum, ex expedita facere harum hic in
            ipsum laudantium magnam obcaecati quas, quasi quis quo rerum saepe sapiente sed tenetur velit veniam.
        </div>
        <div>Accusamus aliquid dolor eum illo nemo officia perferendis praesentium quos, totam ut velit, veniam vero!
            Accusamus blanditiis consectetur fugit ipsam, maiores repudiandae sed similique! Accusantium asperiores
            autem facere impedit vitae!
        </div>
        <div>Consectetur, cupiditate ducimus excepturi id in itaque magni nobis quas rem voluptate! Ab, aut cupiditate
            ea error esse et laudantium molestias necessitatibus numquam placeat quibusdam quod ratione repudiandae ut
            vitae?
        </div>
        <div>Ab at blanditiis cumque, eligendi exercitationem explicabo facere, fugiat incidunt inventore itaque non
            optio perferendis quibusdam recusandae rem repellendus sapiente tempora tempore ut veritatis vero voluptatem
            voluptates voluptatibus. Odio, repellendus.
        </div>
        <div>Adipisci atque consequuntur deserunt dolorum maiores nesciunt nulla perferendis quia sunt velit. Adipisci,
            dolores dolorum, earum et maiores minima neque nesciunt nostrum rem reprehenderit sed sit sunt suscipit
            tempore veniam.
        </div>
        <div>Assumenda error natus porro quam saepe. Ad animi aut blanditiis commodi, culpa cumque earum exercitationem,
            facere fuga hic id incidunt iusto mollitia nam nihil nisi optio quidem quis sequi tempore.
        </div>
        <div>Accusamus animi aut commodi, consequatur delectus deserunt distinctio dolore dolorem est eveniet fugit
            ipsum laboriosam libero maxime minus, natus neque nihil odio omnis provident quas quibusdam sequi sint
            tempore totam!
        </div>
        <div>Animi aut beatae blanditiis culpa eius error ex necessitatibus, nesciunt nostrum obcaecati omnis quis quo
            ratione sed sequi sint ut. Ab eligendi expedita ipsam maxime neque non ratione temporibus velit.
        </div>
        <div>Ad, atque explicabo fugiat in itaque magni neque, qui suscipit ullam veniam veritatis vero! Distinctio
            eaque facilis ipsam nisi voluptas. Eos, nobis, suscipit? Accusamus corporis fuga laboriosam natus
            perferendis vitae!
        </div>
        <div>Culpa fugiat incidunt magnam? Commodi deleniti porro, qui sapiente similique temporibus ullam? Aliquam
            delectus deserunt distinctio dolores eos error eum expedita facilis harum, magnam magni modi quas tempora
            velit voluptatum.
        </div>
        <div>Aliquam fugiat in perspiciatis suscipit vel velit. Accusantium adipisci aliquid deleniti ducimus
            exercitationem expedita illo illum iste laborum magni maiores non obcaecati rerum saepe, sequi soluta,
            tempora, temporibus! Ex, optio.
        </div>
        <div>Adipisci architecto blanditiis consequatur porro! Aperiam, architecto assumenda debitis dignissimos eaque,
            eligendi enim harum id ipsam mollitia nemo nesciunt nihil, provident quae quam quas quibusdam quidem
            similique sunt tempora! Fuga!
        </div>
        <div>Aliquam animi architecto at cupiditate, dolor eos error excepturi illum labore odio quaerat quasi veniam
            voluptas? Asperiores dolorum eaque esse, illum ipsum laudantium libero minus nam officiis quibusdam quo,
            reprehenderit?
        </div>
        <div>Commodi ea inventore maxime qui suscipit? Ab accusamus autem consequuntur dolor doloremque hic, illo
            laboriosam laudantium modi nostrum obcaecati optio placeat quam quia quibusdam quis quos, rerum ullam
            voluptatem voluptates.
        </div>
        <div>Ab blanditiis corporis deserunt earum hic natus nemo obcaecati reprehenderit sequi voluptatum. Aperiam
            aspernatur aut delectus earum eveniet ex illo inventore ipsa nemo neque nisi optio provident quas quidem,
            tempora.
        </div>
        <div>Animi doloremque error ipsa omnis perspiciatis, ullam. Accusantium non perspiciatis sed! Aliquam, animi
            inventore itaque nemo omnis quos reprehenderit? Consectetur deserunt doloremque dolorum error harum illum
            ipsam itaque libero quae.
        </div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab commodi consectetur, consequatur, corporis
            cumque delectus dolore doloribus ea, explicabo fugit in natus non officiis praesentium quam quia reiciendis!
            Magni, pariatur!
        </div>
        <div>Deserunt natus neque reiciendis, sequi suscipit voluptatibus! Adipisci alias consequatur cupiditate dicta
            dolores dolorum eius enim error est eum fugit harum provident, quibusdam reprehenderit, similique
            temporibus, voluptate voluptates voluptatibus. A.
        </div>
        <div>Aliquid architecto atque consequuntur culpa cum dolores dolorum eaque exercitationem explicabo fuga fugit
            laboriosam laborum magni, maxime necessitatibus nostrum numquam perferendis porro quas quibusdam quisquam
            tempora vel velit veritatis vero.
        </div>
        <div>Aperiam commodi dolorum esse eum maxime pariatur quis veritatis! Amet hic nemo obcaecati qui repellendus
            repudiandae vero. Amet deleniti deserunt dolorum incidunt nam nisi odit optio, provident sint totam
            voluptates!
        </div>
        <div>Accusamus ad aliquam amet aut consequatur corporis cupiditate delectus doloremque ducimus eveniet harum
            hic, id incidunt, inventore minima modi nam necessitatibus officia porro quasi quibusdam repellat
            repudiandae rerum ullam ut!
        </div>
    </div>
    <script>
        let buttonE = document.getElementById('btn');
        /* 鼠标点击事件 */
        buttonE.addEventListener('click',function (){
            alert('哈哈哈,点我了吧~');
        })
        /* 鼠标移入事件 */
        let h4E = document.querySelector('h4');
        h4E.addEventListener('mouseenter',function (){
            console.log('标题被查看了!')
            h4E.innerHTML = '你移入了我,我变红啦~';
            h4E.style.color = 'red';
        })
        /* window对象是浏览器内置的全局对象,代表了当前浏览器窗口 */
        window.addEventListener('resize',function (){
            console.log('窗口大小被resize了!');
        })
        window.addEventListener('scroll',function (){
            console.log('窗口被滚动了!');
        })
    </script>
</body>
</html>